{% extends 'layouts/box.html' %}

{% block optional %}
<div>
  <ul class="text-center flex font-bold md:text-lg rounded-t-2xl
             text-slate-500 dark:text-slate-100 bg-slate-200 dark:bg-slate-700 creme:text-stone-600 creme:bg-stone-400
             divide-x divide-slate-300 dark:divide-slate-800 creme:divide-stone-500
             [&>li>a]:w-full [&>li]:w-1/2 [&>li>a]:py-2">
    <li class="rounded-tl-2xl hover:bg-primary creme:hover:bg-stone-500">
        <a href="{% url 'add_pdf' %}" class="inline-block border-b-2 border-primary ">Individual</a>
    </li>
    <li class="rounded-tr-2xl hover:bg-primary creme:hover:bg-stone-500">
        <a href="{% url 'bulk_add_pdfs' %}" class="inline-block hover:border-b-2 hover:border-primary">Bulk</a>
    </li>
  </ul>
</div>
{% endblock %}

{% block content %}
<h1 class="mb-6">Add PDF File</h1>
<div x-data="{ in_progress: false, hide_name_input: false, show_additional: false }">
    <form x-on:submit="in_progress = true" method="POST" enctype="multipart/form-data">
        {% csrf_token %}
        <p>
            <label
                    class="w-auto! mr-2 inline-block! text-gray-600 dark:text-slate-300 creme:text-stone-600"
                    for="id_use_file_name">Use File Name:</label>
            <input x-model="hide_name_input" class="w-auto!" type="checkbox" name="use_file_name" id="id_use_file_name">
        </p>
        <p>
            {{ form.name.errors }}
            <input x-show="!hide_name_input" x-bind:value="get_name_place_holder(hide_name_input)"
                   type="text" name="name" placeholder="Add PDF Name" maxlength="150"  id="id_name" required>
        </p>
        <p>
            {{ form.tag_string.errors }}
            {{ form.tag_string }}
            <span class="helptext" id="{{ form.tag_string.auto_id }}_helptext">
                {{ form.tag_string.help_text|safe }}
            </span>
        </p>
        <p>
            {{ form.description.errors }}
            {{ form.description }}
            <span class="helptext" id="{{ form.description.auto_id }}_helptext">
                {{ form.description.help_text|safe }}
            </span>
        </p>
        <p>
            {{ form.file.errors }}
            {{ form.file }}
        </p>
        {% include 'includes/add_pdf_optionals.html' %}
    </form>
</div>

<script>
  function get_name_place_holder(hidden)
  {
    if (hidden === true) {
      return "bb36974a-3792-47c5-96cc-c79adb87cf82";
    }
    else {
      return "";
    }
  }
</script>
{% endblock %}
